<template>
  <span class="change-form-value">
    <span
      v-if="data.isChange"
      class="changed flow-status-color"
    >{{ data.value||'无' }}</span>
    <span
      v-else
      class="no-change"
    >{{ data.value||'无' }}</span>
  </span>
</template>

<script>
import {defineComponent, getCurrentInstance, reactive, toRefs, watch,} from 'vue'

export default defineComponent({
  props: {
    itemKey: {
      type: String,
      default: '',
    },
    getLabelKey: {
      type: String,
      default: '',
    },
    detailData: {
      type: Object,
      default: () => {},
    },
    dataType: {
      type: String,
      default: 'normal',
    },
    isSellUnit: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const currentInstance = getCurrentInstance()
    var datas = reactive({
      data: {
        isChange: false,
        getLabelKey: props.getLabelKey,
        value: '',
      },
    })
    const compareChange = (newData) => {
      if (newData.compareChange.hasOwnProperty(props.itemKey)) {
        datas.data.isChange = true
        datas.data.value =
          dataTypeOperation(
            newData?.Old[props.itemKey],
            newData?.Old.sellUnit
          ) +
          '-->' +
          dataTypeOperation(
            newData.compareChange[props.itemKey].after,
            newData?.New.sellUnit
          )
      } else {
        datas.data.isChange = false
        datas.data.value = dataTypeOperation(
          newData?.Old[props.itemKey],
          newData?.Old.sellUnit
        )
      }
    }
    const dataTypeOperation = (data, sellUnit) => {
      var value = data
      if (props.getLabelKey) {
        value = currentInstance.proxy.getLabel(props.getLabelKey, data)
      }
      if (props.dataType === 'normal') {
        console.log(value)
      } else if (props.dataType === 'price') {
        if (props.isSellUnit) {
          value =
            data +
            '元' +
            '/' +
            currentInstance.proxy.getLabel('sell_unit', sellUnit)
        } else {
          value = data + '元'
        }
      } else if (props.dataType === 'date') {
        if (data) {
          value = currentInstance.proxy.dateFormat('yyyy-mm-dd HH:MM', data)
        }
      }
      return value
    }
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          compareChange(newval)
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(datas),
    }
  },
})
</script>
